<template>
  <el-card class="NewApproval">
    <el-radio-group
      size="small"
      v-model="form.operation_type"
      @change="typeChange"
      fill="#7b94d8"
    >
      <el-radio-button label="1">赠送</el-radio-button>
      <el-radio-button label="2">扣除</el-radio-button>
    </el-radio-group>
    <el-form
      :model="form"
      ref="form"
      label-width="100px"
      style="margin-top: 20px"
    >
      <el-form-item
        :label="`${form.operation_type == 1 ? '充值' : '扣除'}类型`"
      >
        <el-radio-group v-model="form.type" @change="typeChange1">
          <el-radio label="1">金币</el-radio>
          <el-radio label="2">宝石</el-radio>
          <el-radio label="3" v-if="form.operation_type == 1">VIP</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户ID">
        <el-input
          v-model="form.user_id"
          placeholder="请输入用户ID"
          @blur="witeId"
          @clear="idClear"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item v-show="form.type != 3" label="当前剩余">
        <el-input v-model="form.balance" disabled></el-input>
      </el-form-item>
      <el-form-item
        v-show="form.type != 3"
        :label="`${form.operation_type == 1 ? '充值' : '扣除'}数量`"
      >
        <el-input
          v-model="form.number"
          :placeholder="`请输入${
            form.operation_type == 1 ? '充值' : '扣除'
          }数量`"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item v-show="form.type == 3" label="到期时间">
        <el-input v-model="form.endtime" disabled></el-input>
      </el-form-item>
      <el-form-item v-show="form.type == 3" label="充值时限">
        <el-radio-group v-model="form.vip_time_limit">
          <el-radio label="1">月度</el-radio>
          <el-radio label="2">季度</el-radio>
          <el-radio label="3">年度</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :label="`${form.operation_type == 1 ? '充值' : '扣除'}理由`"
      >
        <el-input
          v-model="form.apply_reason"
          :placeholder="`请输入${
            form.operation_type == 1 ? '充值' : '扣除'
          }理由`"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
    <el-button style="margin-left: 150px" size="small" @click="clear"
      >清 空</el-button
    >
    <el-button size="small" class="btn" @click="submit">提 交</el-button>
  </el-card>
</template>

<script>
import { userUserDetail } from "@/api/UserManagement";
import { adminSystemGiveSystemAdd } from "@/api/AuditManagement";
export default {
  inject: ["reload"],
  data() {
    return {
      form: {
        operation_type: "1",
        type: "1",
        user_id: "",
        balance: "",
        number: "",
        apply_reason: "",
        vip_time_limit: "1",
        endtime: "",
        apply_account: localStorage.getItem("SET_NAME"),
      },
    };
  },
  methods: {
    clear() {
      this.reload();
    },
    witeId() {
      let rules = /^\d{6}$/;
      if (!rules.test(this.form.user_id)) {
        this.$message.error("请输入正确用户ID");
        return;
      }
      userUserDetail({
        userId: this.form.user_id,
      }).then((res) => {
        if (res.code == 0) {
          if (this.form.type == 1) {
            this.form.balance = res.data.coin;
          } else if (this.form.type == 2) {
            this.form.balance = res.data.diamond;
          } else {
            this.form.endtime = res.data.vipExpiredTime;
          }
        }
      });
    },
    idClear() {
      this.form.balance = "";
      this.form.endtime = "";
    },
    typeChange() {
      this.form.type = "1";
    },
    typeChange1() {
      this.form.user_id = "";
      this.form.balance = "";
      this.form.endtime = "";
    },
    async submit() {
      const res = await adminSystemGiveSystemAdd(this.form);
      if (res.code == 0) {
        this.$message.success("提交成！");
        this.reload();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.NewApproval {
  box-sizing: border-box;
  .el-input {
    width: 300px;
  }
}
</style>